<template>
  <div class="scroll">
    <el-breadcrumb class="ml-10px mt-40px" separator="/">
      <el-breadcrumb-item class="font-size-4" :to="{ path: '/goods/goodsList' }">商品</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索 -->
    <div class="screen flex mt-20px ml-10px justify-between flex-items-end">
      <div class="flex flex-1">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="form-cell flex flex-items-center">
              <span class="font-bold pr-10px">商品名称</span>
              <el-input v-model="formInline.code" class="cell-input" placeholder="请输入商品名称" clearable />
            </div>
          </el-col>
          <el-col :span="6">
            <div class="form-cell flex flex-items-center">
              <span class="font-bold pr-10px">商品分类</span>
              <el-select v-model="formInline.type" class="cell-input" clearable placeholder="请选择商品分类">
                <el-option label="校服" :value="1" />
                <el-option label="邮费补差价" :value="2" />
                <el-option label="配饰" :value="3" />
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="form-cell flex flex-items-center">
              <span class="font-bold pr-10px">商品品牌</span>
              <el-select v-model="formInline.type" class="cell-input" clearable placeholder="请选择商品品牌">
                <el-option label="博牙智能学院" :value="1" />
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="form-cell flex flex-items-center">
              <span class="font-bold pr-10px">商品货号</span>
              <el-input v-model="formInline.code" class="cell-input" placeholder="请输入商品货号" clearable />
            </div>
          </el-col>
          <el-col :span="6" class="mt-15px">
            <div class="form-cell flex flex-items-center">
              <span class="font-bold pr-10px">上架状态</span>
              <el-select v-model="formInline.type" class="cell-input" clearable placeholder="全部">
                <el-option label="上架" :value="1" />
                <el-option label="下架" :value="2" />
              </el-select>
            </div>
          </el-col>
          <el-col :span="6" class="mt-15px">
            <div class="form-cell flex flex-items-center">
              <span class="font-bold pr-10px">学校名称</span>
              <el-select v-model="formInline.type" class="cell-input" clearable placeholder="请选择学校名称">
                <el-option label="博牙智能学院" :value="1" />
              </el-select>
            </div>
          </el-col>
        </el-row>
      </div>
      <a-space>
        <el-button size="default" class="small-btn !border-rd-20px" color="#397dfd" plain >重置</el-button>
        <el-button size="default" class="small-btn !border-rd-20px !pl-50px !pr-50px" color="#397dfd" type="primary">查询</el-button>
      </a-space>
    </div>
    <!-- tabs -->
    <el-tabs v-model="activeName" type="card" class="mt-40px pl-40px" @tab-click="handleClick">
      <el-tab-pane label="全部商品" name="first"/>
      <el-tab-pane label="出售中" name="second"/>
      <el-tab-pane label="已售馨" name="third"/>
      <el-tab-pane label="已下架" name="fourth"/>
      <el-tab-pane label="回收站" name="fiveth"/>
    </el-tabs>
    <!-- 页面 -->
    <div class="pl-10px pr-10px pb-20px bg-white border-rd-10px">
      <div class="flex justify-between flex-items-end pb-15px pt-15px">
        <el-space>
          <el-select v-model="formInline.type" class="filter-btn" clearable placeholder="请选择商品分类">
            <el-option label="校服" :value="1" />
            <el-option label="邮费补差价" :value="2" />
            <el-option label="配饰" :value="3" />
          </el-select>
          <el-button size="small" class="small-btn !border-rd-20px !pl-50px !pr-50px" color="#397dfd" type="primary">确定</el-button>
          <!-- <div class="search-btn">确定</div> -->
        </el-space>
        <el-space>
          <el-button size="small" class="small-btn"  color="#397dfd" type="primary">批量设置学校</el-button>
          <el-button size="small" class="small-btn" color="#397dfd" type="primary">批量设置性别</el-button>
          <el-button size="small" class="small-btn" color="#397dfd" type="primary">商品库存导出</el-button>
          <el-button size="small" class="small-btn" color="#397dfd" type="primary">添加商品</el-button>
        </el-space>
      </div>
      <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="name" label="编号" align="center" />
        <el-table-column prop="sex" align="center" label="商品图片">
          <template #default>
            <el-image
              style="width: 100px; height: 100px"
              :src="url"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :initial-index="4"
              fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column property="phone" align="center" label="商品名称" />
        <el-table-column property="school" align="center" label="价格/货号" />
        <el-table-column property="school" align="center" label="标签" width="200">
          <template #default="scope">
            <div class="flex justify-between items-center">
              <a-space class="flex items-center justify-between w-40%">
                <span>上架</span>
                <el-switch v-model="scope.row.school" size="default" />
              </a-space>
              <a-space class="flex items-center justify-between w-55%">
                <span>显示销量</span>
                <el-switch v-model="scope.row.school" size="default" />
              </a-space>
            </div>
            <div class="flex justify-between items-center">
              <a-space class="flex items-center justify-between w-40%">
                <span>新品</span>
                <el-switch v-model="scope.row.school" size="default" />
              </a-space>
              <a-space class="flex items-center justify-between w-55%">
                <span>显示库存</span>
                <el-switch v-model="scope.row.school" size="default" />
              </a-space>
            </div>
            <div class="flex justify-between items-center">
              <a-space class="flex items-center justify-between w-40%">
                <span>推荐</span>
                <el-switch v-model="scope.row.school" size="default" />
              </a-space>
              <a-space class="flex items-center justify-between w-55%">
                <span>预售商品</span>
                <el-switch v-model="scope.row.school" size="default" />
              </a-space>
            </div>
          </template>
        </el-table-column>
        <el-table-column property="school" align="center" label="排序">
          <template #default="scope">
              <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.date"
                class="item"
                placeholder="请输入内容"
              />
              <div v-else class="txt">{{ scope.row.school }}</div>
          </template>
        </el-table-column>
        <el-table-column property="school" align="center" label="SKU库存" />
        <el-table-column property="school" align="center" label="销量" />
        <el-table-column property="school" align="center" label="所属组织" />
        <el-table-column label="操作" align="center" width="200">
          <template #default>
            <el-space direction="vertical">
              <el-button size="small" class="small-btn !border-rd-20px" color="#397dfd" type="primary">编辑</el-button>
              <el-button size="small" class="small-btn !border-rd-20px" color="#397dfd" type="primary">复制</el-button>
              <el-popconfirm
                teleported
                width="200"
                title="是否要删除该学生？"
                confirm-button-text="是"
                cancel-button-text="否"
              >
                <template #reference>
                  <el-button size="small" class="small-btn !border-rd-20px" color="#FB5A2F" type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </el-space>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-center pt-60px">
        <el-pagination
          v-model:current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          background
          layout="sizes, prev, pager, next"
          :total="1000"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
const activeName = ref('first')
const url = 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const formInline = reactive({
  code: '',
  school: '',
  type: '',
  status: '',
  chooseDate: 1,
  date: ''
})
const handleClick = (tab: TabsPaneContext, event: Event) => {
}
const options = reactive([
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
])
interface User {
  name: string
  sex: string
  phone: string
  school: string
  grand: string
  date: string
}
const tableData: User[] = [
  {
    name: 'Tom',
    sex: 1,
    phone: '123456789',
    school: '学校1',
    grand: '一年级1班',
    date: '2016-05-03'
  },
  {
    name: 'Tom',
    sex: 1,
    phone: '123456789',
    school: '学校1',
    grand: '一年级1班',
    date: '2016-05-03'
  },
  {
    name: 'Tom',
    sex: 1,
    phone: '123456789',
    school: '学校1',
    grand: '一年级1班',
    date: '2016-05-03'
  },
  {
    name: 'Tom',
    sex: 1,
    phone: '123456789',
    school: '学校1',
    grand: '一年级1班',
    date: '2016-05-03'
  }
]
const currentPage = ref(5)
const handleSizeChange = (val: number) => {
}
const handleCurrentChange = (val: number) => {
}
</script>

<style scoped lang="scss">
:deep(.el-input__wrapper) {
  box-shadow: none !important;
  padding: 1px 8px !important;
  border-radius: 20px;
}
:deep(.el-select__wrapper) {
  box-shadow: none !important;
  padding: 8px !important;
  border-radius: 20px;
}
:deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
  border-bottom: none !important;
}
:deep(.el-table thead th) {
  // background: #eaeaea;
  border-bottom: none !important;
}
:deep(.el-table thead th .cell) {
  font-weight: bold;
  color: #5e5e69;
  font-size: 15px;
}
:deep(.el-table .cell) {
  padding: 5px 10px !important;
}
:deep(.el-table) {
  border-radius: 10px;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
}
// tabs修改样式
:deep(.el-tabs--card > .el-tabs__header) {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
  border: none !important;
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
  border: none !important;
  padding: 10px 30px;
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
  background: #387cfd;
  border-radius: 10px;
  color: #fff;
}
.filter-btn {
  color: #397dfd;
  border-radius: 30px;
  border: 2px solid #397dfd;
  cursor: pointer;
  width: 200px !important;
  :deep(.el-select__wrapper) {
    padding: 0 8px !important;
    min-height: 21px !important;
    color: #397dfd !important;
  }
  :deep(.el-select__placeholder) {
    color: #368dfc !important;
  }
}
</style>
